<!-- 产品介绍 -->
<template>
	<view class="home">
		<view v-if="!judgePlatform" class="custom-navbar" :style="{ height:(topHeight.statusBarHeight+44)+'px'}">
			<view class="head_content" :style="{height:menuHeight.height+'px',minHeight:menuHeight.height+'px',
			lineHeight:menuHeight.height+'px',
			bottom:(menuHeight.top-topHeight.statusBarHeight)+'px'}">
				<text>膜品品牌</text>
			</view>
		</view>
		<!-- 顶部图片组-->
		<view class="top" :style="{ marginTop:(topHeight.statusBarHeight+44)+'px'}">
			<!-- 左边“新品上市” -->
			<view @click="goToNewCase" class="top_left" :style="{backgroundImage:'url('+images[0].src+')'}">
				<span>{{images[0].name}}</span>
			</view>
			<!-- 右边四小模块 -->
			<div class="top_right">  
				<view v-for="(img,index) in images.slice(1)">
					<view @click="goToShow(img)" class="top_right_img" :style="{backgroundImage:'url('+img.src+')'}">
						<span>{{img.name}}</span>
					</view>  
				</view>
			</div>
		</view>
		<view class="video_Div">
			<video class="video-example" src="https://www.mopkeji.com/uploads/mini/2.mp4" controls></video>
		</view>
		<!-- <u-line color="#ddd" /> -->
		<!-- 中心内容 -->
		<!-- 内容简介 -->
		<view class="content">
			<!-- <view class=""> -->
				<!-- 公司简介 -->
				<u-parse :html="aboutUs.content"></u-parse>
				<!-- <img style="height: 2516rpx;" src="https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/bf76087d2b014e10b1977718cf153b80.png"/> -->
			<!-- </view> -->
		</view>

		<!-- 底部导航 -->
		<u-tabbar class="tab_bar" v-model="nav_current" :list="nav_list" height="100">
			
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 图片路径
				images:[
					{"name":"新品上市","src":"https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/66be1759066547d3bc99a3ba6da1c0ab.png"},
					{"name":"产品介绍","src":"https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/117adbc47b634e5e87b15fc649539a47.png"},
					{"name":"培训教程","src":"https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/c5364cbc0db9460b9ea38086b3abcc8e.png"},
					{"name":"行业动态","src":"https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/7659789e224040f5ab17a4099e6e6cf8.png"},
					{"name":"联系我们","src":"https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/c0abeae5b8f2439d9b6d2195b4080211.png"}
				],
				pagetitle: '',
				tabCur: 0,
				nav_list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/death/nav/home.png",
						selectedIconPath: "/static/death/home-selected.png",
						text: '首页'
					},
					{
						pagePath: "/pages/car/case",
						iconPath: "/static/death/nav/case.png",
						selectedIconPath: "/static/death/nav/case-selected.png",
						text: '案例'
					},
					{
						pagePath: "/pages/car/quote",
						iconPath: "/static/death/nav/price.png",
						selectedIconPath: "/static/death/nav/price-selected.png",
						text: '报价'
					},
					{
						pagePath: "/pages/product/product",
						iconPath: "/static/death/nav/brand.png",
						selectedIconPath: "/static/death/nav/brand-selected.png",
						text: '品牌'
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/death/nav/mine.png",
						selectedIconPath: "/static/death/nav/mine-selected.png",
						text: '我的'
					},
				], // 底部导航
				nav_current: 3,
				tabNav: ['隐形车衣', '改色膜', '车窗防爆膜'],
				content: '',
				aboutUs:{
					content:'<img src="https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/bf76087d2b014e10b1977718cf153b80.png"/>',
				},
				topHeight: uni.getSystemInfoSync(),
				menuHeight:uni.getMenuButtonBoundingClientRect(),
			}
		},
		computed:{
			judgePlatform(){
				return uni.getSystemInfoSync().uniPlatform == 'web';
			}
		},
		onLoad() {
			// this.getPageAbout();
			// console.log(this.nav_current);
		},
		methods: {
			// 获得页面数据
			async getPageAbout(){
				let res = await this.$api.getPage({id: 3});
				if(!res.code){
					return;
				}
				this.aboutUs = res.data;

			},
			// async getProduct(id) {
			// 	let {
			// 		success,
			// 		result
			// 	} = await this.$api.getProduct({
			// 		id: id
			// 	});
			// 	if (!success) {
			// 		return;
			// 	}
			// 	this.content = result.content;
			// 	console.log("product");
			// 	console.log(this.content);
			// },
			//tab切换
			tabSelect(e) {
				this.tabCur = parseInt(e.currentTarget.dataset.id);
				this.getProduct(this.tabCur);
			},
			// 新品案例跳转
			goToNewCase(){
				uni.navigateTo({
					url:'/pages/car/newCase'
				})
			},
			// 右四图点击
			goToShow(img){
				console.log(img)
				let navPath = '';
				switch(img.name){
					case '产品介绍':
						navPath = '/pages/product/new-product?type=1';
						break;
					case '培训教程':
						navPath = '/pages/course/course';
						break;
					case '行业动态':
						navPath = '/pages/dynamic/dynamic';
						break;
					case '联系我们':
						navPath = '/pages/about/contact';
						break;
				}
				uni.navigateTo({url: navPath});
			}
		},

	}
</script>
<style>
	page{
		/* background-image: linear-gradient(to bottom, #fbcb11, white); */
		background-image: url('https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/880e4d04a8da487a85dbfe3c1bef0d72.png');
		background-repeat: no-repeat;background-size:cover;
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.home {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
	}

	// 自定义导航样式
	.custom-navbar {
		position: fixed;
		z-index: 100;
		font-size: 36rpx;
		color: #323233;
		width: 100%;
		.head_content{
			position: absolute;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		// background-color: gray;
	}

	.top {
		height: 200px;
		width: 92%;
		display: flex;
		// background-color: gray;
		// justify-content: center;
	}
	
	.top_left {
		width: 50%;
		
		height: 180px;
		// display: 50%;
		// background-color: antiquewhite;
		margin: 5px;
		border-radius: 5px;
		background-size: cover;
		background-repeat: no-repeat;
		// text-align: center;
		padding-left: 33rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 34rpx;
		color: white;
		line-height: 80px;
		
	}
	
	.top_left img{
		width: 100%;
		height: 100%;
		height: auto;
		display: block;
		
		
	}
	
	.top_right {
		width: 50%;
		// background-color: lightblue;
		margin: 8rpx;
		display: grid;  
		grid-template-columns: 1fr 1fr; /* 创建两列，每列占据可用空间的一部分（这里是等分） */  
		grid-template-rows: 1fr 1fr; /* 创建两行，每行也是等分 */  
		row-gap: 5px; 
		column-gap: 3px;
		height: 180px;
	}
	.top_right_img{
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 5px;
		text-align: center;
		font-weight: 200;
		color: white;
		font-size: 28rpx;
		line-height: 30px;
	}
	
	.video_Div{
		// background-color: gray;
		width: 100%;
		margin: 5% 0;	
		display: flex;
		justify-content: center;
	}
	
	.video_Div video{
		width: 92%;
		border-radius: 5px;
	}

	.search {
		width: 90%;
		margin: 0 auto;
		// padding: 20upx 0;

		::v-deep .uni-input-input {
			width: 600upx;
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx;
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.img {
			padding: 20upx;
			background-color: orange;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}

	.content {
		margin: 4% 0 0 0;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		width: 92%;
		
		p{
			width: 90%;
			// height: 100%;
		}

		.content-title {
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			// border: 2upx solid red;
		}

		.brand {
			// border: 2upx solid red;
			text-align: center;

			.video {
				width: 100%;
			}
		}


		.loadmore {
			clear: both;
			padding: 80upx;
		}

		//漆面
		.paint {
			// border: 2upx solid red;
			display: none;
		}

		//改色
		.color-change {
			display: none;

			.color-example {
				.color-tabs {}
			}
		}

		//文章列表
		.article {

			.article-list {
				margin-left: -15upx;
				// margin-right: 20upx;
				// padding: 25upx;

				.article-title {
					// line-height: 100upx;
					font-size: 30upx;
					margin-left: 50upx;
				}

				.article-pic {
					width: 100%;
					height: 100%;
				}
			}

		}
	}

	.picture-list-info {
		float: left;
		margin-left: 50upx;
		margin-top: 50upx;
		position: relative;
	}

	.picture-list-img {
		width: 300upx;
		height: 250upx;
	}

	.picture-list-desc {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 25upx;
		padding: 10upx;

	}
</style>